<template>
  <div>
      <!-- elementui 有几个主题颜色
       primary 主色 success 绿色 warning 黄色
       danger 红色  info 灰色
        -->
      <el-dialog width="50%" :visible.sync="flag" :title="title"
       v-bind="$attrs"
      
      :before-close="toClose"
      @open="open"
      @close="close"
      >
          <el-form>
            <template v-for="(item,index) in formData">
              <!-- 文本框 -->
              <el-form-item v-if="item.type=='text'" :label="item.label">
                    <el-input   v-model="formObj[item.model]" :placeholder="item.placeholder"></el-input>
              </el-form-item>
              <!-- 下拉框 -->
               <el-form-item v-if="item.type=='select'" :label="item.label">
                    <el-select v-model="formObj[item.model]">
                      <el-option v-for="optItem in item.optArr" :value="optItem.value">
                        {{optItem.label}}
                      </el-option>
                    </el-select>
              </el-form-item>
              <!-- 开关 -->
               <el-form-item v-if="item.type=='switch'" :label="item.label">
                  <el-switch v-model="formObj[item.model]"></el-switch>
               </el-form-item>
            </template>
          
            
          </el-form>
          <!-- <template #footer>
                <el-button type="primary">确定</el-button>
                <el-button type="danger">取消</el-button>
          </template> -->
          <span slot="footer">
                 <el-button type="primary" @click="toSend">确定</el-button>
                <el-button type="danger" @click="flag=false">取消</el-button>
          </span>
      </el-dialog>

       <el-button type="primary" @click="flag=true">打开</el-button>



    <!-- 使用eleui 的注意事项 -->

      <!-- 
          1.属性Attributes  可以改变 ui组件的样和功能
                  使用中注意 数据类型

          2.事件Events  组件可以绑定哪些自带事件 事件回调参数
                  事件内部的形参 很多可以帮助完成开发

          3.方法Metho  获取组件后 才可以调用的方法


          4.插槽 Slot 完成自定义内容 和获取参数
                 
      -->



      <!-- 组件的二次封装  -->

      <!-- 
      
          1. 设计了哪些父传子的数据


          2.设计了哪些子传父的数据


          3.继承组件的原来的多个属性
                 v-bind="$attrs"

          4.设计哪些插槽


      
  
      -->



  </div>
</template>

<script>
export default {
  name: 'Vue2304BEleui',
  props:{
    title:{
      type:String
    },
    width:{
      type:String
    },
    formData:{ //生成表单控件的部分
      type:Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      flag:false,
      formObj:{ //收集表单数据
    
      }
    };
  },

  mounted() {
    
  },

  methods: {
    toSend(){ //设计子传父
        // 将表单收集到的数据  传递给父组件
        console.log(this.formObj,"----------")
        this.$emit('send',this.formObj)

    },
    toClose(done){
        console.log(done,"---------")
    },
    open(){
      console.log("打开了")
    },
    close(){
      console.log("关闭了")
    }
  },
};
</script>